<template>
    <div>
        <header class="mui-bar mui-bar-nav">
            <router-link tag="span" to="/home" class="mui-icon mui-icon mui-icon-back"></router-link>
            <h1 class="mui-title" style="font-family: fantasy;">个人中心</h1>
        </header>
        <div class="mui-content">
            <div class="my-img" style="width: 100%; height: 150px;">
                <div style="width:120px;height:120px;margin:20px auto;border-radius:50%;border:2px solid #fff;overflow: hidden;">
                       <img src="../assets/logo.png" width="120px" height="120px">
                </div>
            </div>

            <ul class="mui-table-view">
                    <li class="mui-table-view-cell">
                        <span class="mui-icon mui-icon-person"> </span>
                        <span class="op-title">昵称</span>
                        <span class="mui-icon mui-icon-arrowright right-icon"></span>
                    </li>
                    <li class="mui-table-view-cell">
                        <span class="mui-icon mui-icon-person"> </span>
                        <span class="op-title">密码</span>
                        <span class="mui-icon mui-icon-arrowright right-icon"></span>
                    </li>
                    <router-link tag="li" to="/home" class="mui-table-view-cell">
                        <span class="mui-icon mui-icon-list"> </span>
                        <span class="op-title">我的日记</span>
                        <span class="mui-icon mui-icon-arrowright right-icon"></span>
                    </router-link>
                    <li class="mui-table-view-cell">
                        <span class="mui-icon mui-icon-person"> </span>
                        <span class="op-title">我的收藏</span> 
                        <span class="mui-icon mui-icon-arrowright right-icon"></span>
                    </li>
                    <li class="mui-table-view-cell" @click="outLogin">
                            <span class="iconfont icon-tuichudenglu" style="font-size: 20px;"> </span>
                            <span class="op-title">退出登录</span>
                            <span class="mui-icon mui-icon-arrowright right-icon" ></span>
                    </li>
                </ul>
    

        </div>
     

    </div>

</template>

<script>
    export default {
        data() {
            return {
                notes: [],
                search: ""
            }
        },
        methods: {
            outLogin:function(){
                var _this = this;
                var btnArray = ['否', '是'];
                this.mui.confirm('确定退出当前登录？', '退出登录', btnArray, function (e) {
                    if (e.index == 1) {
                        sessionStorage.removeItem('userId');
                        _this.$router.push('/login');
                    }
                   
                });
            }

        },
    }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    html {
        touch-action: none;
    }

    header {
        background-color: #51a2e2;
        color: #fff;
    }

    .content {
        background: #fff;
    }

    h1 {
        color: #fff;
    }
.right-icon{
    float: right;
}
.op-title{
    margin-left: 20px;
}
</style>